<template>
	<view class="a">
		<image class="a_img" :src="url+'/image/back.png'" mode=""></image>
		<view class="b">
			<view>
				<view class="black_f_48 font_w_bold mar_b_8">同路仁商家登录</view>
				<view class="grey_f_24">请先在用户端入驻成为商家</view>
			</view>
			<view class="b_b">
				<view class="b_b_a bor_b_bot">
					<u--input placeholder="请输入手机号" maxlength="11" type="text" clearable="true" border="none"
						v-model="value" @change="change"></u--input>
				</view>
				<view class="b_b_a bor_bot">
					<u--input placeholder="请输入登录密码" type="password" clearable="true" border="none"
						v-model="value1" @change="change1"></u--input>
				</view>
				<view class="blue_f_28" @click="go_view('/pages/mine/passLogin')">验证码登录</view>
			</view>
			<view v-if="is_show" class="login white_f_32 font_w_bold" @click="submit()">
				登录
			</view>
			<view v-if="!is_show" class="loginer white_f_32 font_w_bold">
				登录
			</view>
			<view class="c dis_f_c_c">
				<u-checkbox-group placement="column" @change="checkboxChange">
					<u-checkbox shape="circle"></u-checkbox>
				</u-checkbox-group>
				<view class="black_s_24">
					同意
					<text class="blue_f_24">《同路仁用户协议》</text>
					&
					<text class="blue_f_24">《隐私协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				value1: '',
				is_show: false,
				url:''
			}
		},
		onLoad() {
			this.url=this.$.ajax_url3
		},
		methods: {
			submit(){
				if(this.is_show){
					if(this.value == ''){
						return this.$.ti_shi('请输入登录账号')
					}
					if(this.value1 == ''){
						return this.$.ti_shi('请输入登录密码')
					}
					this.$.ajax(1,'post','user/login',{
						account:this.value,
						password:this.value1,
						type:2,
					},(res)=>{
						if(res.code == 200){
							this.$.set_data('token',res.data.token)
							this.$.ti_shi('登录成功')
							setTimeout(()=>{
								this.$.open_tab('/pages/index/index')
							},600)
						}else{
							this.$.ti_shi(res.msg)
						}
					});
				}
			},
			change(e) {
				if (this.value.length > 0 && this.value1.length > 0) {
					this.is_show = true
				} else {
					this.is_show = false
				}
			},
			change1(e) {
				if (this.value.length > 0 && this.value1.length > 0) {
					this.is_show = true
				} else {
					this.is_show = false
				}
			},
			checkboxChange(n) {
				console.log('change', n);
			},
			go_view(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style>
	.a {
		position: relative;
	}

	.a_img {
		width: 750rpx;
		height: 640rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.b {
		position: absolute;
		top: 240rpx;
		left: 64rpx;
	}

	.b_b {
		margin-top: 96rpx;
	}

	.b_b_a {
		width: 558rpx;
		height: 44rpx;
		padding: 32rpx;
		background: rgba(51, 119, 255, 0.03);
		border-radius: 54rpx 54rpx 54rpx 54rpx;
		border: 2rpx solid rgba(51, 119, 255, 0.2);
	}

	.login {
		width: 590rpx;
		height: 100rpx;
		background: rgba(51, 119, 255, 1);
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		text-align: center;
		line-height: 100rpx;
		margin-left: 16rpx;
		margin-top: 64rpx;
	}

	.loginer {
		width: 590rpx;
		height: 100rpx;
		background: rgba(51, 119, 255, 0.3);
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		text-align: center;
		line-height: 100rpx;
		margin-left: 16rpx;
		margin-top: 64rpx;
	}

	.c {
		margin-top: 556rpx;
	}
</style>